import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    width: 1366
    height: 768
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: imageContainer
        width: parent.width
        height: parent.width / (wallpaper.width / wallpaper.height)
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: 0
        anchors.verticalCenterOffset: 0

        Image {
            width:parent.width
            id: wallpaper
            source:'res/wallpaper.jpg'
            fillMode: Image.PreserveAspectFit
        }
    }

    ColumnLayout {
        spacing: 0
        anchors.fill: parent            // 锚点定位 填充父窗口
        Rectangle {
            id:header
            Layout.fillWidth: true
            height: 50
            Layout.maximumHeight: 50    // 限死最大高度
            Layout.minimumHeight: 50    // 限死最小高度
            color:'#90ffffff'
            RowLayout {
                anchors.fill: parent    //填充Header
                Button {
                    text:'test'
                    onClicked:{
                        footer.state = footer.state === 'show'? 'hide' :'show'
                    }
                }
            }
        }

        Rectangle{
            id:center
            Layout.fillHeight: true
            Layout.fillWidth: true
            color:'transparent'
            border.width: 0
        }

        Rectangle {
            id:footer
            Layout.fillWidth: true
            color:'#50ffffff'
            state:'show'
            states: [
                State {
                    name:'show'
                    PropertyChanges{
                        footer{
                            Layout.maximumHeight: 229
                            Layout.minimumHeight: 229
                            height:229
                        }
                    }
                },
                State {
                    name:'hide'
                    PropertyChanges{
                        footer{
                            Layout.maximumHeight: 0
                            Layout.minimumHeight: 0
                            height:0
                        }
                    }
                }
            ]
            transitions: [
                Transition {
                    from:'hide'
                    to:'show'
                    PropertyAnimation {
                        target:footer
                        properties: "Layout.maximumHeight,Layout.minimumHeight,height";
                        easing.type: Easing.OutBack
                        duration: 500
                        from: 0
                        to: 229
                    }
                },
                Transition {
                    from:'show'
                    to:'hide'
                    PropertyAnimation {
                        target:footer
                        properties: "Layout.maximumHeight,Layout.minimumHeight,height";
                        easing.type: Easing.OutBounce
                        duration: 500
                        from: 229
                        to: 0
                    }
                }
            ]
        }
    }
}

